#{extends 'main.html'/}
#{set 'moreCss'}
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css">
<style>
    .affix {
        top: 80px;
    }
    .profile-image{
        width: 140px;
        height: 200px;
    }
    .panel-body p{
        min-height:40px;
    }
    .panel-body h4{
        min-height:40px;
    }
    @media (max-width:767px) {
        .profile-image{
            width: 70px;
            height: 100px;
        }
        .panel-body p{
            font-size:1em;
            min-height:32px;
        }
        .panel-body h4{
            font-size:1em;
            min-height:32px;
        }
    }
    #app{
        padding-top:50px;
    }
</style>
#{/set}
#{set 'moreScripts'}
    <script src="https://cdn.bootcss.com/jquery.isotope/3.0.4/isotope.pkgd.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.imagesloaded/4.1.3/imagesloaded.pkgd.min.js"></script>
    <script src="https://unpkg.com/mockjs@1.0.1-beta3/dist/mock-min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/1.3.7/index.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
    <script>
          var app = new Vue({
            el : "#app",
            data : {
                pageData:{
                    list: [],
                    totalCount:0,
                    pageSize:20,
                    currPage:1,
                },
                txtName : '',
            },
              mounted:function(){
                  $.getJSON('/tts/nameJson/${name}', function(data) {
                      app.pageData = data;
                  });
              },
              methods: {
                  handleCurrentChange:function(val) {
                      $.getJSON('/tts/nameJson/${name}', {"page":val},function(data) {
                          app.pageData = data;
                      });
                    },
                  searchByName:function(){
                      if(app.txtName=="") {
                          this.$message("搜索条件不能为空");
                          return;
                      }
                      window.location.href="/tts/nameList/"+app.txtName;
                  }
            },
              updated:function() {
                  $("#app").imagesLoaded(function(){
                      console.log("images loaded")
                      var $grid =  $(".isotope").isotope({
                          itemSelector:'.tutor',
                          layoutMode:'fitRows'
                      });
                      $(".list-group a").on("click",function(event){
                          event.preventDefault();
                          var filterValue = $(this).attr("data-filter");
                          $(".list-group a").removeClass("active");
                          $(this).addClass("active");
                          $grid.isotope({filter:filterValue});
                      });
                  });
              }
        });
    </script>
#{/set}
  <div id="app">
    <!-- Navigation -->
    #{navbar /}
    <!-- Page Content -->
    <div class="container">
        <!-- Page Heading/Breadcrumbs -->
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">
                    导师搜索
                </h3>
            </div>
            <div class="col-md-10">
                <input class="form-control input-lg" type="text" placeholder="按照导师姓名搜索" v-model="txtName" @keyup.enter="searchByName">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary btn-lg btn-block" @click="searchByName" >搜索</button>
            </div>
        </div>

        <div class="row" style="position:relative;padding-top:10px">
            <!-- Sidebar Column -->
            <!-- Content Column -->
            <div class="col-md-12">
                <div class="row isotope">
                  <div class="col-md-3 col-xs-6 tutor" v-for="(t,index) in pageData.list">
                      <div class="panel panel-default text-center">
                          <div class="panel-heading">
                           <a :href="'/tts/tutor/detail/'+t.code" v-if="t.isOpen">
                             <img class="img-responsive img-circle img-related profile-image" :src="'https://hr.sufe.edu.cn/hr/upload/photo/'+t.headShot" alt="">
                            </a>
                           <img class="img-responsive img-circle img-related profile-image" :src="'https://hr.sufe.edu.cn/hr/upload/photo/'+t.headShot" alt="" v-else>
                          </div>
                          <div class="panel-body">
                              <h4>{{t.name}}</h4>
                              <p>{{t.professionalTitle}} {{t.unit}}</p>
                          </div>
                      </div>
                  </div>
                </div>
            </div>

        </div>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageData.currPage"
                :page-size="20"
                layout="total, prev, pager, next, jumper"
                :total="pageData.totalCount">
        </el-pagination>
        <!-- Related Projects Row -->
        <!-- /.row -->

        <hr>

        <!-- Footer -->
    #{footer /}

    </div>
    <!-- /.container -->
  </div>
